const{src,dest,watch} = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');
const babel = require('gulp-babel');
function fnCopyIndex(){
    return src('./src/index.html')
    .pipe(dest('./dist/html')); 
}
function fnCSS(){
    return src('./src/**/*.scss')
    .pipe(sass({outputStyle : 'expanded'}))
    // .pipe(cssnano())
    .pipe(rename({suffix : '.min'})
    .pipe(dest('./dist/css')));
}
function fnJS(){
    return src('./src/js/*.js')
    .pipe(babel({presets:['@babel/env']}))
    .pipe(uglify())
    .pipe(rename({suffix : '.min'}))
    .pipe(dest('./dist/js'));
}
function fnHTML(){
     return src('./src/html/*.html')
     .pipe(htmlmin())
     .pipe(dest('./dist/html'));
}
function fnImg(){
    return src('./src/images')
    .pipe(imagemin())
    .pipe(dest('./dist/img'))
}
function fnWatch(){
    watch('./src/index.html',fnCopyIndex);
    watch('./src/html/*.html',fnHTML);
    watch('./src/js/*.js',fnJS);
    watch('./src/sass/*.scss',fnCSS);

}
exports.copyIndex =fnCopyIndex;
exports.html =fnHTML;
exports.img=fnImg;
exports.sass=fnCSS;
exports.js =fnJS;
exports.default=fnWatch;